<template>
  <div class=" Dashboard">
     <!-- 头部的盒子 -->
     <header>
      <!-- <h6>阳谷昊泉机械有限公司</h6> -->
      <h5>数据可视化大屏</h5>
      <div class="showTime">
        <timescomponent />
      </div>
      <div class="showTimest">
        <Righttime />
      </div>
      </header>
    <!-- 页面主体部分 -->
    <section class="mainbox">
      <div class="column">
        <!-- 生产派单 -->
        <div class="panel123">
            <methods :Undelivered="Undelivered" v-if="Undelivered.length > 0"/>
          <div class="panel-footer" />
        </div>
        <div class="panelsda">
        <!-- 生产日期，数量 -->
          <div class="chart123">
            <Histogram :time="time" v-if="time.length > 0" />
           <div class="panel-footer" />
          </div>
        </div>
      </div>
      <div class="column">
        <!-- 地图模块 -->
            <!-- 月份生产数量 -->
           <div class="panelsdas">
            <div class="chart123s">
               <Mapping class="Mapping" />
               <div class="panel-footer" />
            </div>
           </div>
        <div class="map">
              <!-- 生产车间信息-->
          <div class="realtime">
              <Columnchart class="Columnchart" :Factory="Factory" v-if="Factory.length > 0"/>
              <div class="panel-footer" />
          </div>
        </div>
      </div>
      <div class="column">
        <!-- 生产进度 -->
        <div class="panel123">
            <Production :schedul="schedul" v-if="schedul.length > 0"/>
          <div class="panel-footer" />
        </div>
        <div class="panelsda">
          <!-- 饼形图 -->
          <div class="chart123">
            <Piechart  :piechart="piechart" v-if="piechart.length > 0" />
            <div class="panel-footer" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>


<script>
import { getDeviceData,getProduceWorkSchedule ,getProduceDetailList,getPendingProduce ,getStockData} from "@/api/api";
import  Columnchart  from "@/components/Columnchart.vue";
import  Mapping   from "@/components/Mapping.vue";
import  Production   from "@/components/Production.vue";
import timescomponent from "@/components/timecomponent.vue";
import Righttime from "@/components/Righttime.vue";
import Histogram from "@/components/Histogram.vue";
import methods from "@/components/methods.vue";
import Piechart from "@/components/Piechart.vue";
export default {
  name:'index',
  data () {
    return {
      // 数采数据
      Factory:[],
      // 生产进度
      schedul:[],
      // 未派单条数
      Undelivered:[],
      // 生产计划
      piechart:[],
      isGetData:false,
       // 生产日期，入库数量
      time:[],
      query:{
	         page: {
	         	 pageIndex: 1,
	         	 pageSize: 200000
	         },
	         produce_type: 2
       },
       queryadd:{
	         page: {
	         	pageIndex: 1,
	         	pageSize: 200000
	         },
	         produce_code: "",
	         dispatch_status: 0
        }
    }
},
components:{
  Columnchart,  
  Mapping,
  Production,
  timescomponent,
  Histogram,
  Piechart,
  methods,
  Righttime
},
created(){
  // this.Delayer()
  this.getDeviceData()
  this.getProduceWorkSchedule()
  this.getProduceDetailList()
  this.getPendingProduce()
  this.getStockData()
},
methods:{
  // 数采统计
   async getDeviceData(){
        const resp = await getDeviceData()
        if(resp.code === 10000){
          this.Factory  = resp.data
          setTimeout(()=>{
            this.getDeviceData()
          },4000)
        }
        // console.log(resp);
     },
     // 生产进度
    async getProduceWorkSchedule(){
      const resp =  await getProduceWorkSchedule(this.query)
        if(resp.code === 10000){
          this.schedul = resp.data.data
          setTimeout(()=>{
            this.getProduceWorkSchedule()
          },4000)
        }
    //  console.log(resp);
     },
     // 生产计划明细列表
    async getProduceDetailList(){
      const resp =  await getProduceDetailList(this.queryadd)
        if(resp.code === 10000){
          this.Undelivered = resp.data.data
          setTimeout(()=>{
            this.getProduceDetailList()
          },4000)
        }
        // console.log(resp);
     },
    // 获取各种成品类型数量统计（右下角圆饼图）
    async getPendingProduce(){
      const resp =  await getPendingProduce()
        if(resp.code === 10000){
          this.piechart = resp.data
          setTimeout(()=>{
            this.getPendingProduce()
          },4000)
        }
    //  console.log( resp);
     },
    //最近七天入库数量
   async  getStockData(){
      const resp =  await getStockData()
      if(resp.code === 10000){
        this.time = resp.data
        setTimeout(()=>{
            this.getStockData()
          },4000)
      }
      // console.log(resp);
     }
    //  Delayer(){
        // setInterval(()=>{
        //      // 生产进度
        //       this.getProduceWorkSchedule()
        // },4000)
        // setInterval(()=>{
        //      // 生产进度
        //       this.getDeviceData()
        // },9000)
    //  }
  }
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
}

li{
  list-style: none;
}
.Dashboard{
  /* min-width: 2180px;
  max-width: 3480px; */
  height: 1080px;
  background: url(../../assets/bg.jpg);
}
header {
  position: relative;
  height: 70px;
  background: url(../../assets/head_bg.png) no-repeat;
  background-size: 100% 100%;
}
header h1 {
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 65px;
}
header .showTime {
  position: absolute;
  left: 0.375rem;
  top: 0;
  line-height: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.25rem;
}
header .showTimest {
  position: absolute;
  right: 0.375rem;
  top: 0;
  line-height: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.25rem;
}
h5{
  font-size:30px;
  color: #fff;
  text-align: center;
  line-height: 70px;
}
h6{
  font-size:26px;
  color: #fff;
  text-align: center;
}

.mainbox{
  display: flex;
  /* min-width: 2160px;
  max-width: 3480px; */
  margin: 0 auto;
  padding:10px 10px 0;
}

.mainbox .column{
  flex: 3;
}

.mainbox .column:nth-child(2){
  flex: 5;
  margin: 0 10px 0;
  overflow: hidden;
}
    /*  */
      .panelsda .chart123{
        position: relative;
        height: 400px;
        width: 620px;
        border: 1px solid rgba(25, 186, 139, 0.17);
        background: url(../../assets/line\(1\).png) rgba(225, 225, 225, 0.03);
      }

      .panelsda .chart123::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    .panelsda .chart123::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    .panelsda .chart123 .panel-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
   }

   .panelsda .chart123 .panel-footer::before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }

      .panelsda .chart123 .panel-footer::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    /*  */
      .panelsdas .chart123s{
        position: relative;
        height: 390px;
        width: 635px;
        border: 2px solid rgba(25, 186, 139, 0.17);
        margin-bottom: 15px;
        background: url(../../assets/line\(1\).png) rgba(225, 225, 225, 0.03);
      }

      .panelsdas .chart123s::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    .panelsdas .chart123s::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    .panelsdas .chart123s .panel-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
   }

   .panelsdas .chart123s .panel-footer::before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }

      .panelsdas .chart123s .panel-footer::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
/*  */
      .mainbox .panel123{
        position: relative;
        height: 58%;
        width: 620px;
        border: 1px solid rgba(25, 186, 139, 0.17);
        margin-bottom: 15px;
        background: url(../../assets/line\(1\).png) rgba(225, 225, 225, 0.03);
      }
  .mainbox .panel123::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    .mainbox .panel123::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

   .mainbox .panel123 .panel-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
   }

   .mainbox .panel123 .panel-footer::before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }

      .mainbox .panel123 .panel-footer::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }

      .mainbox .panel h2{
          height: 30px;
          color: #fff;
          line-height: 30px;
          text-align: center;
          font-size: 18px;
          font-weight: 400;
      }

      .mainbox .panel h2 a{
         color: #fff;
         text-decoration: none;
         margin: 0 10px;
      }

      .mainbox .panel .chart{
        height: 24px;
        color: #fff;
      }

      .mainbox .panel .line2{
        height: 24px;
        color: #02a6b5;
      }

      .no{
        background: rgba(101, 132, 226, 0.1);
        padding: 15px;
      }

      .no .no-hd{
          position: relative;
          border: 1px solid rgba(25, 186, 226, 0.17);
      }

      .no .no-hd::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 30px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }

      .no .no-hd::after {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        width: 30px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }

      .no .no-hd ul{
        display: flex;
      }

      .no .no-hd ul li{
         position: relative;
         flex: 1;
         line-height: 80px;
         font-size: 50px;
         color: #ffeb7b;
         text-align: center;
         font-family:  serif;
      }

      .no .no-hd ul li::after {
          content: "";
          position: absolute;
          top: 25%;
          right: 0;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
        }

        .no .no-bd ul{
          display: flex;
        }

        .no .no-bd ul li{
          flex: 1;
          text-align: center;
          color: rgba(225, 225, 225, 0.7);
          font-size: 18px;
          height: 40px;
          line-height: 40px;
          padding-top: 10px;
        }

        .map{
          position: relative;
          height: 100%;
        }
        .map .Mapping{
          width: 100%;
          height: 46%;
          margin-bottom: 20px;
          background: rgba(101, 132, 226, 0.1);
        }
        .map .realtime .Columnchart{
          width: 100%;
          height:90%;
        }

       
     .map .realtime{
        position: relative;
        height: 58.3%;
        width: 100%;
        border: 1px solid rgba(25, 186, 139, 0.17);
        background: url(../../assets/line\(1\).png) rgba(225, 225, 225, 0.03);
      }

      .map .realtime::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 3px solid #02a6b5;
      border-top: 3px solid #02a6b5;
      content: "";
    }

    .map .realtime::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 3px solid #02a6b5;
      border-top: 3px solid #02a6b5;
      content: "";
    }

    .map .realtime .panel-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
   }

   .map .realtime .panel-footer::before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 10px;
        height: 10px;
        border-left: 3px solid #02a6b5;
        border-bottom: 3px solid #02a6b5;
        content: "";
      }

      .map .realtime .panel-footer::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right:3px solid #02a6b5;
        border-bottom: 3px solid #02a6b5;
        content: "";
      }

        /* html {
    overflow-y: hidden;
    overflow-x: hidden;
    // overflow: hidden;
} */
</style>